<template>
  <div id="NavItem">
    <div>
      <p style="color: #000">{{ data.name }}</p>
    </div>
    <div>
      <a href="#" v-for="(item, i) in data.areas" :key="i">{{ item }}</a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["data"],
};
</script>
<style lang="scss" scoped>
#NavItem {
  display: flex;
  & > div:nth-child(1) {
    width: 25%;
  }
  & > div:nth-child(2) {
    width: 65%;
    & > a {
      color: #333333;
      font-size: 12px;
    }
    a:hover {
      text-decoration: underline;
    }
    a:after {
      content: "|";
      margin: 0 3px;
      color: #e6e6e6;
    }
    a:nth-last-child(1):after {
      content: " ";
    }
  }
}
</style>